<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-02-28 16:04:45
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-04-07 00:30:40
 * @FilePath: \parking-lot-management\src\views\coupon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-02-28 16:04:45
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-03-06 15:21:36
 * @FilePath: \parking-lot-management\src\views\coupon\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-01-15 20:44:19
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-02-24 10:53:51
 * @FilePath: \parking-lot-management\src\views\order\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 10px;margin-top: 20px;">
      <el-form-item label="优惠券名称">
        <el-input v-model="formInline.couponName" placeholder="名称" />
      </el-form-item>
      <el-form-item label="优惠券价值">
        <el-input v-model="formInline.couponValue" placeholder="小于等于价格" />
      </el-form-item>
      <el-form-item label="优惠券类型">
        <!-- 类型选择器 -->
        <el-select v-model="formInline.couponType" clearable placeholder="请选择">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券状态">
        <!-- 状态选择器 -->
        <el-select v-model="formInline.status" clearable placeholder="请选择">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <!-- 添加 -->
      <el-form-item>
        <el-button type="primary" @click="openForm">添加优惠券</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表可编辑 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="couponName" label="优惠券名称" style="width: 10%" />
      <el-table-column prop="couponValue" label="优惠券价值" style="width: 5%" />
      <el-table-column prop="couponType" label="优惠券类型" style="width: 5%" />
      <el-table-column prop="couponNum" label="优惠券数量" style="width: 5%" />
      <el-table-column prop="couponDes" label="优惠券描述" style="width: 10%" />
      <el-table-column prop="StartTime" label="优惠券发放时间" style="width: 17.5%" />
      <el-table-column prop="expirationTime" label="优惠券过期时间" style="width: 17.5%" />
      <el-table-column prop="status" label="状态" style="width: 10%" />
      <el-table-column prop="couponDiscount" label="折扣" style="width: 10%" />
      <el-table-column fixed="right" label="操作" style="width: 10%">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          <el-button type="text" size="small" @click="editData(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="this.total"
      style="padding: 30px 0; text-align: center;"
      @current-change="changeCurrentPage"
    />

    <!-- 添加优惠券的form表单 -->
    <el-dialog title="添加或修改优惠券" :visible.sync="dialogFormVisible">
      <el-form ref="couponForm" :model="form">
        <el-form-item label="优惠券名称" :label-width="formLabelWidth" prop="couponName">
          <el-input v-model="form.couponName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="优惠券价值" :label-width="formLabelWidth" prop="couponValue">
          <el-input-number v-model="form.couponValue" controls-position="right" :min="1" />
        </el-form-item>
        <el-form-item label="优惠券类型" :label-width="formLabelWidth" prop="couponType">
          <el-select v-model="form.couponType" placeholder="请选择优惠券类型">
            <el-option label="通用券" value="1" />
            <el-option label="满减券" value="2" />
            <el-option label="折扣券" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券状态" :label-width="formLabelWidth" prop="status">
          <el-select v-model="form.status" placeholder="请选择优惠券状态">
            <el-option label="可用优惠券" value="1" />
            <el-option label="失效优惠券" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券数量" :label-width="formLabelWidth" prop="couponNum">
          <el-input-number v-model="form.couponNum" controls-position="right" :min="1" />
        </el-form-item>
        <!-- 描述 -->
        <el-form-item label="优惠券描述" :label-width="formLabelWidth" prop="couponDes">
          <el-input v-model="form.couponDes" autocomplete="off" />
        </el-form-item>
        <!-- 日期选择器 -->
        <el-form-item label="发放时间" :label-width="formLabelWidth" prop="StartTime">
          <el-date-picker v-model="form.StartTime" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <!-- 日期选择器 -->
        <el-form-item label="过期时间" :label-width="formLabelWidth" prop="expirationTime">
          <el-date-picker v-model="form.expirationTime" type="datetime" placeholder="选择日期时间" />
        </el-form-item>
        <!-- 折扣选择器 -->
        <el-form-item label="折扣" :label-width="formLabelWidth" prop="couponDiscount">
          <el-input-number v-model="form.couponDiscount" :precision="2" :step="0.1" :max="1" :min="0" prop="couponDiscount" />
        </el-form-item>
        <!-- 确认按键 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrChangeForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryByConForPage, deleteById, insertCoupon, UpdateCoupon } from '@/api/conpon.js'
/*
 *@Date: 2023-01-14 22:06:37
 *@Description: 模块描述
*/
export default {
  name: '',
  data() {
    return {
      // 时间选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      value1: '',
      value2: '',
      // 弹窗参数
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 绑定添加和删除表单，用于清除
      form: {
        id: '',
        couponName: '',
        couponType: '',
        couponValue: '',
        couponNum: '',
        StartTime: '',
        status: '',
        expirationTime: '',
        couponDiscount: '',
        couponDes: ''
      },
      // 页面参数
      tableData: [{}],
      total: 0,
      formInline: {},

      typeOptions: [{
        value: '1',
        label: '通用券'
      }, {
        value: '2',
        label: '满减券'
      }, {
        value: '3',
        label: '折扣券'
      }],
      statusOptions: [{
        value: '1',
        label: '可用优惠券'
      }, {
        value: '2',
        label: '失效优惠券'
      }, {
        value: '3',
        label: '优惠券时效已结束'
      }]
    }
  },
  created() {
    this.init()
  },
  mounted() { },
  methods: {
    // 提交或者修改表单
    async submitOrChangeForm() {
      this.dialogFormVisible = false
      if (this.form.id == '') {
        console.log('添加优惠券')
        console.log(this.form.id)
        await insertCoupon(this.form)
        this.onSubmit()
      } else {
        console.log('修改优惠券')
        console.log(this.form)
        this.changeTypeAndStatus()
        await UpdateCoupon(this.form)
        this.onSubmit()
        // this.form.id = ''
      }
    },
    // 修改状态和类型，用于后端修改
    changeTypeAndStatus() {
      if (this.form.couponType == '通用券') {
        this.form.couponType = 1
      } else if (this.form.couponType == '满减券') {
        this.form.couponType = 2
      }
      if (this.form.status == '可用优惠券') {
        this.form.status = 1
      } else if (this.form.status == '失效优惠券') {
        this.form.status = 2
      } else if (this.form.status == '优惠券时效已结束') {
        this.form.status = 3
      }
    },
    // 编辑表单
    editData(data) {
      this.dialogFormVisible = true
      this.form = JSON.parse(JSON.stringify(data))
      console.log(data)
      console.log(this.formInline)
    },
    // 打开添加表单
    openForm() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.couponForm.resetFields()
      })
    },
    // 打开确认框
    deleteData(data) {
      this.$confirm('此操作将永久删除该优惠券, 是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        deleteById(data)
        this.onSubmit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 初始化表格
    async init() {
      const result = await queryByConForPage({})
      const res = result.data.data.records
      res.forEach(element => {
        element.status = this.changeStatus(element.status)
        element.couponType = this.changeType(element.couponType)
      })
      this.tableData = res
      this.total = result.data.data.total
    },

    // 分页查询
    async onSubmit() {
      const res = await queryByConForPage(this.formInline)
      const result = res.data.data.records
      result.forEach(element => {
        element.status = this.changeStatus(element.status)
        element.couponType = this.changeType(element.couponType)
      })
      this.total = res.data.data.total
      this.tableData = result
    },

    // 修改页
    async changeCurrentPage(page) {
      this.formInline.pageCount = page
      this.onSubmit()
    },

    // 更改状态函数
    changeStatus(key) {
      if (key == '1') {
        return '可用优惠券'
      } else if (key == '2') {
        return '失效优惠券'
      } else if (key == '3') {
        return '优惠券时效已结束'
      }
    },

    // 更改类型函数
    changeType(key) {
      if (key == '1') {
        return '通用券'
      } else if (key == '2') {
        return '满减券'
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
